<template>
	<view class="">
		<view class="content">
			<view class="myHead">
				<text>头像</text>
				<view class="">
					<!-- <image
						class="avatar
"
						@click="updateImg"
						:src="imgList == '' ? "https://s2.ax1x.com/2019/12/16/Q4LudA.jpg' : imgList"
						mode=""
					></image> -->
					<u-avatar class="avatar" size='large' @click="updateImg" :src="imgList"></u-avatar>
					<image class="rightIcon" src="../../../static/img/personCenter/right.png"></image>
				</view>
			</view>
			<view class="line10"></view>
			<view class="borderBottomStyle paddingStyle userName">
				<text style="width: 200rpx;">用户名</text>
				<input type="text" maxlength="10" placeholder="请输入用户名" v-model="nickname" />
			</view>
			<view class="borderBottomStyle paddingStyle userName" @click="visible = true">
				<text style="width: 200rpx;">性别</text>
				<text>{{ gender == 0 ? '男' : '女' }}</text>
			</view>
			<view class="paddingStyle userName borderBottom10">
				<text style="width: 200rpx;">电话号码</text>
				<input @input="phoneHandle" :disabled="getSMS" type="number" v-model="phone" maxlength="11" placeholder="请输入11位手机号" />
			</view>
			<view
				class="borderBottomStyle  paddingStyle"
				style="font-size:30rpx;padding: 30rpx 23rpx;height: 100%;display: flex;justify-content: space-between;align-items: center;"
			>
				<text>住址</text>
				<textarea auto-height maxlength="50" v-model="address" style="color: #888;font-size: 30rpx;text-align: right;" auto-height placeholder="请输入地址" />
			</view>
		</view>
		<view class="save" @click="saveBtn">确定修改</view>
		<s-popup custom-class="demo-popup" position="center" v-model="visible">
			<!-- 内容 -->
			<view class="radioStyle" @click="visible = false">
				<evan-radio style="width: 100%;margin-left: 20rpx;" @change="visibleHandel" v-model="gender" label="0">男</evan-radio>
				<evan-radio style="width: 100%;margin-left: 20rpx;" @change="visibleHandel" v-model="gender" label="1">女</evan-radio>
			</view>
		</s-popup>
	</view>
</template>

<script>
import { index } from '@/api/user/userCenter/userCenter.js';
import { userInfo } from '@/api/user/userCenter/userInfo/userInfo.js';
import { uploadFile,downloadFile } from '@/api/upload/upload.js';
import sPopup from '@/components/s-popup/index.vue';
import evanRadio from '@/components/evan-radio/evan-radio.vue';
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
export default {
	data() {
		return {
			imgList: '',
			imgBase64List: '',
			phone: '',
			regNumber: true, //获取验证码的间隔
			count: '',
			timer: null,
			phoneReg: false, //手机号真实性验证
			visible: false, //性别展示
			SMSflag: false, //判断用户手机号验证是否正确
			getSMS: false,
			gender: 0,
			nickname: '',
			SMSNumber: '', //输入的验证码
			regFlag: true,
			address: ''
		};
	},
	components: {
		sPopup,
		evanRadio
	},
	async onLoad() {
		let res = await index();
		this.imgList = res.data.user.avatar;
		this.nickname = res.data.user.nickname;
		this.phone = res.data.user.mobile;
		this.address = res.data.user.address;
		this.gender = res.data.user.gender;

	},
	methods: {
		updateImg() {
			//更新用户图片
			uni.chooseImage({
				count: 1, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				success: res => {
					this.imgList = res.tempFiles[0].path;
				}
			});
		},
		phoneHandle() {
			//手机号处理
			if (this.phone.length == 0) {
				this.phoneReg = false;
				return false;
			} else if (this.phone.length < 11) {
				this.phoneReg = false;
				return false;
			} else if (!myreg.test(this.phone)) {
				this.phoneReg = false;
				return false;
			} else {
				this.phoneReg = true;
			}
		},
		async saveBtn() {
			let info = {
				avatar: this.imgList,
				nickname: this.nickname,
				mobile: this.phone,
				gender: this.gender,
				address: this.address
			};
			if (this.imgList.indexOf('/uploads') == -1 && this.imgList.indexOf('thirdwx.qlogo.cn') == -1) {
				let img = await uploadFile(this.imgList);
				info.avatar=JSON.parse(img).data.url
			}
			let res=await userInfo(info)
			if(res.code==1){
				uni.showToast({
					title: '修改成功！'
				});
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					});
				},1000)
			}else{
				uni.showToast({
					title: res.msg,
					icon:"none"
				});
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/userInfo.scss';
</style>
